<template>
	<view>
		<navbar name="人体成分分析"></navbar>
		<view class="rankingView">
			<view class="head-portrait">
				<image class="portrait-image" :src="result.avatarUrl">
				</image>
				<view class="username-center">
					<view class="name-archives">
						<view class="name ellipsis">
							{{result.nickName}}
						</view>
						<view class="archives" @tap="navdangan">
							健康档案
						</view>
					</view>
					<view class="ranking">
						当前排名{{rankingList[0].currentRanking||'0'}}名，超过了{{rankingList[0].excessesPerc||'0'}}%用户
					</view>
				</view>
				<view class="ranking-date">
					<!-- 2021年10月08日 -->
					{{scaleData.createTimeDay||''}}
				</view>
			</view>
			<view class="weight-b">
				<view class="scoreView">
					体重
					<view class="weight-num">
						{{scaleData.firstValue}}<text>kg</text>
					</view>
				</view>
				<view class="scoreView">
					分数
					<view class="weight-num">
						{{scaleData.healthData.score||''}}<text>分</text>
					</view>
				</view>
				<view class="history" @tap="historynav()">
					历史数据
				</view>
			</view>

			<view class="ranking-view">
				<view class="ranking-title">
					<view>
						排名
					</view>
					<view>
						昵称
					</view>
					<view>
						分数
					</view>
				</view>
				<view class="ranking-stle" v-for="(item,index) in rankingList" :key="index"
					:class="index<=2?'heightPaim':''">
					<view class="ranking-num">
						<image class="medal" v-if="index == 0"
							src="http://static.bsyjk.cn/one%402x/07932AD70A7D4AE586F5B07873BBD8D0.png"></image>
						<image class="medal" v-if="index == 1"
							src="http://static.bsyjk.cn/two%402x/0DD2F040D89E4A61BB7DAD205A3B00DA.png"></image>
						<image class="medal" v-if="index == 2"
							src="http://static.bsyjk.cn/three/B57D0D5891CC47EF82766931D7CB094A.png"></image>
						{{index+1}}
					</view>
					<view class="ranking-name">
						<image class="medal" :src="item.avatarUrl||'http://pic.yolzzz.com/l/65872593C2124F8381198C89479F28D6.png'">
						</image>{{item.nickName}}
					</view>
					<view class="ranking-branch">
						{{item.score}}
					</view>
				</view>

				<view class="noData" v-if="rankingList.length ==0">
					<view class="noDataicon">

					</view>
					暂无数据
				</view>
			</view>
		</view>
		<!-- 健康报告 -->
		<view class="HealthReport">
			<view class="titlename">
				健康报告
			</view>
			<view class="reportItemList-body">
				<view class="reportItemList" v-for="(item,index) in resarr" :key="index">
					<view class="reportItemList-flex">
						<view class="reportItemList-item" v-for="(items,indexs) in item" :key="indexs"
							:style="indexs==2?'border-right: none;':''" @tap="reportItemTab(items,index,indexs)">
							<view class="view-name">
								{{items.name||''}}
							</view>
							<view class="view-unit">
								{{items.value}}<text>{{items.unit||''}}</text>
							</view>
							<view class="view-level" :style="'color:'+items.bar[items.level]">
								{{items.levelNames[items.level] || ''}}
							</view>
						</view>
					</view>
					<view class="reportItemList-height"
						:class="[indexs==0?'prbefoer0':'',indexs ==1?'prbefoer1':'',indexs==2?'prbefoer2':'']"
						v-if="index == tabIndex">
						<view class="view-levelNamesflex" style="justify-content: left;" v-if="showBar">
							<block v-for="(itema,indexa) in boundaries" :key="indexa">
								<view class="view-levelNames" :class="boundaries_length2class[boundariesLength]"
									style="text-align: right;">
									{{itema}}
								</view>
							</block>
						</view>
						<view class="view-progress" v-if="showBar">
							<progress :percent="reportPercent" :activeColor="Actavecolor" active stroke-width="8" />
						</view>
						<view class="view-levelNamesflex" v-if="showBar">
							<view class="view-levelNames" style="flex:1;" v-for="(itema,indexa) in levelNames"
								:key="indexa" :class="">
								{{itema}}
							</view>
						</view>
						<view class="view-desc">
							{{desc}}
						</view>
					</view>
				</view>
				<view class="noData" style="color: #fff;" v-if="resarr.length ==0">
					<view class="noDataicon" style="margin: 140rpx auto 30rpx;">

					</view>
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import Decoder from "./components/decoder";

	export default {
		data() {
			return {
				Actavecolor:'',
				boundariesLength:0,
				boundaries_length2class: {
					1: 'math-one',
					2: 'math-two',
					3: 'math-three',
					4: 'math-four',
				},
				scaleData: {
					firstValue: ''
				}, //体重分数
				showBar: '',
				bar: [], //颜色
				reportPercent: 0, //报告百分比
				level: 0, //等级
				boundaries: [], //
				levelNames: [], //等级数组
				indexs: 999, //子级值
				tabIndex: 999, //点击索引
				desc: '',
				resarr: [], //转换后的数组
				report: {
					reportItemList: []
				}, //js解析完成数据
				rankingList: [],
				result: {
					nickName: ''
				}, //用户信息
			}
		},
		onLoad(e) {
			this.getBaseUserInfo()
			if (e.healthDataId) {
				this.getHealthData(e.healthDataId)
			}else{
				this.getHealthData('')
			}
			this.getScaleRanking(); //
		},
		methods: {
			navdangan() {
				uni.navigateTo({
				   url: '/pagesMy/health-records/health-records'
				})
			},
			getScaleRanking() {
				let _this = this;
				this.$api.get(global.apiUrls.getScaleRanking + '?userId=' + uni.getStorageSync(
						global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							_this.rankingList = result;
						}
					}).catch(err => {})
			},
			historynav() {
				uni.navigateTo({
					url: '/subpackage/bodyFatScale/contrast'
				})
			},
			// 获取百分比
			toPercent(num, total) {
				console.log((Math.round(num / total * 10000) / 100.00), '417777777777777777')
				return (Math.round(num / total * 10000) / 100.00); // 小数点后两位百分比
			},
			reportItemTab(item, index, indexs) {
				if(item.bar){
					this.Actavecolor = item.bar[item.level]
				}
				console.log(item, 175555)
				if (index == this.tabIndex && this.tabIndex != 999 && this.indexs != 999 && indexs == this.indexs) {
					index = 999
					indexs = 999
				}
				if (item.levelNames) {
					this.reportPercent = this.toPercent(item.level + 1, item.levelNames.length)
				}
				if(item.boundaries){
					this.boundariesLength = item.boundaries.length
				}
				this.boundaries = item.boundaries
				this.showBar = item.showBar
				this.bar = item.bar
				this.levelNames = item.levelNames
				this.desc = item.desc
				this.indexs = indexs
				this.tabIndex = index;
			},
			GetAge(strBirthday) {
				var returnAge,
					strBirthdayArr = strBirthday.split("-"),
					birthYear = strBirthdayArr[0],
					birthMonth = strBirthdayArr[1],
					birthDay = strBirthdayArr[2],
					d = new Date(),
					nowYear = d.getFullYear(),
					nowMonth = d.getMonth() + 1,
					nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0周岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
					}
				}
				return returnAge; //返回周岁年龄
			},
			// 获取电子秤数据
			getHealthData(healthDataId) {
				// let scaleDatab = {
				// 	bmi: 22.6,
				// 	bmr: 1534,
				// 	bodyAge: 25,
				// 	bodyShape: 4,
				// 	bodyfat: 17.5,
				// 	bone: 2.7,
				// 	device: {
				// 		name: "QS1",
				// 		isScreenOn: true,
				// 		transferType: "broadcast",
				// 		mac: "ED:67:39:4B:76:16",
				// 		modelId: "03DF"
				// 	},
				// 	heartRate: 0,
				// 	lbm: 53.92,
				// 	muscle: 47,
				// 	muscleMass: 51.22,
				// 	protein: 18.8,
				// 	score: 96.3,
				// 	subfat: 15.6,
				// 	time: new Date(),
				// 	user: {
				// 		height: 170,
				// 		age: 30,
				// 		gender: "male",
				// 		isSport: false,
				// 		birthday: new Date()
				// 	},
				// 	visfat: 5,
				// 	water: 59.6,
				// 	weight: 65.35,
				// }
				// const report = new Report(scaleDatab)
				// let baseArray = report.reportItemList;
				// let len = baseArray.length;
				// let n = 3; //假设每行显示4个
				// let lineNum = len % 3 === 0 ? len / 3 : Math.floor((len / 3) + 1);
				// let resarr = [];
				// for (let i = 0; i < lineNum; i++) {
				// 	// slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
				// 	let temp = baseArray.slice(i * n, i * n + n);
				// 	resarr.push(temp);
				// }
				// this.resarr = resarr
				// console.log(resarr, '252222222222');
				// this.report = report;
				// console.log(report, 26555555555555555)
				// return






				let _this = this;
				let sendData = {
					healthDataId: healthDataId
				};
				this.$api.post(global.apiUrls.getHealthData, sendData)
					.then(res => {
						if (res.data.code == 1000) {
							let scaleData = res.data.result;
							scaleData.healthData = JSON.parse(scaleData.healthData)
							let daytype = _this.$basejs.dataType(scaleData.createTime)
							scaleData.createTimeDay = daytype.n + '年' + daytype.y + '月' + daytype.r + '日'
							console.log(scaleData, '24111111111111')
							_this.scaleData = scaleData
							let dataT = scaleData.healthData
							// dataT.bodyAge = 18
							// dataT.heartRate = 0;
							// dataT.lbm = ''
							// dataT.muscleMass = dataT.sinew;
							// dataT.device = {
							// 	name: "QS1",
							// 	isScreenOn: true,
							// 	transferType: "broadcast",
							// 	mac: scaleData.mac,
							// 	modelId: scaleData.deviceId
							// }
							// dataT.time = new Date()
							// dataT.user = {
							// 	height: _this.result.height,
							// 	age: _this.GetAge(_this.result.birthday),
							// 	gender: _this.result.sex == 1 ? "male" : "female",
							// 	isSport: false,
							// 	birthday: new Date(_this.result.birthday)
							// }
							// let scaleDatab = {
							// 	bmi: 22.6,
							// 	bmr: 1534,
							// 	bodyAge: 25,
							// 	bodyShape: 4,
							// 	bodyfat: 17.5,
							// 	bone: 2.7,
							// 	device: {name: "QS1", isScreenOn: true, transferType: "broadcast", mac: "ED:67:39:4B:76:16", modelId: "03DF"},
							// 	heartRate: 0,
							// 	lbm: 53.92,
							// 	muscle: 47,
							// 	muscleMass: 51.22,
							// 	protein: 18.8,
							// 	score: 96.3,
							// 	subfat: 15.6,
							// 	time: new Date(),
							// 	user: {height: 170, age: 30, gender: "male", isSport: false, birthday:new Date()},
							// 	visfat: 5,
							// 	water: 59.6,
							// 	weight: 65.35,
							// }
							// 判断年龄为空
							// if(dataT.birthday==null){
							// 	dataT.birthday = new Date()
							// }
							console.log(dataT,'37333333333333333333333')
							const report = new Decoder(dataT)
							console.log(report, '2888888888888888')
							let baseArray = report.reportItemList;
							let len = baseArray.length;
							let n = 3; //假设每行显示4个
							let lineNum = len % 3 === 0 ? len / 3 : Math.floor((len / 3) + 1);
							let resarr = [];
							for (let i = 0; i < lineNum; i++) {
								// slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
								let temp = baseArray.slice(i * n, i * n + n);
								resarr.push(temp);
							}
							_this.resarr = resarr
							console.log(resarr, '252222222222');
							_this.report = report;
							console.log(report, '4900000000000000')
						}
					}).catch(err => {})
			},
			// 获取用户信息
			getBaseUserInfo() {
				let _this = this;
				this.$loginl.get(global.apiUrls.getBaseUserInfo + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							// result.sex = result.sex == '1' ? '男' : '女'
							_this.result = result;
							console.log(result, '21777777777')
						}
					}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.view-levelNamesflex .math-four:nth-child(1) {
		width: 22%;
	}

	.view-levelNamesflex .math-four:nth-child(2) {
		width: 20%;
	}

	.view-levelNamesflex .math-four:nth-child(3) {
		width: 20%;
	}

	.view-levelNamesflex .math-four:nth-child(4) {
		width: 20%;
	}

	.view-levelNamesflex .math-three:nth-child(1) {
		width: 27%;
	}

	.view-levelNamesflex .math-three:nth-child(2) {
		width: 25%;
	}

	.view-levelNamesflex .math-three:nth-child(3) {
		width: 25%;
	}

	.view-levelNamesflex .math-two:nth-child(1) {
		width: 35%;
	}

	.view-levelNamesflex .math-two:nth-child(2) {
		width: 34%;
	}

	.view-levelNamesflex .math-one:nth-child(1) {
		width: 52%;
	}

	.rankingView {
		width: 750rpx;
		min-height: 814rpx;
		background: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
		border-radius: 40rpx 40rpx 0 0;
		margin: 23rpx auto 0;
		padding: 1rpx 0 120rpx;

		.weight-b {
			display: flex;
			width: 704rpx;
			height: 156rpx;
			margin: 0 auto;

			.scoreView {
				width: 220rpx;
				padding: 30rpx 0 0;
				font-size: 30rpx;
				color: #fff;

				.weight-num {
					font-size: 60rpx;

					text {
						font-size: 30rpx;
					}
				}
			}

			.history {
				position: relative;
				left: 40rpx;
				width: 215rpx;
				height: 68rpx;
				font-size: 30rpx;
				padding-left: 72rpx;
				line-height: 68rpx;
				background: rgba(255, 255, 255, 0.3);
				box-shadow: 2rpx 1px 30rpx 1px rgba(238, 171, 54, 0.68);
				border-radius: 30rpx 0px 0px 30rpx;
				color: #FF8F34;
			}

			.history::before {
				content: '';
				width: 38rpx;
				height: 44rpx;
				position: absolute;
				top: 10rpx;
				left: 20rpx;
				background: url(http://static.bsyjk.cn/historyIcon/01077DBCEB614B9085FB1832E8CAFFBF.png)no-repeat;
				background-size: 100% 100%;
			}
		}

		.ranking-view {
			width: 706rpx;
			min-height: 370rpx;
			padding-bottom: 30rpx;
			background: #fff;
			margin: 40rpx auto 0;
			border-radius: 15rpx;
			box-shadow: 0px 2rpx 15rpx 0px rgba(0, 0, 0, 0.15);

			.ranking-stle {
				width: 653rpx;
				height: 80rpx;
				display: flex;
				background: #EFEFEF;
				border-radius: 14rpx;
				margin: 20rpx auto 0;
				text-align: center;
				line-height: 80rpx;
				color: #999999;

				.ranking-num {
					width: 20%;
					font-size: 34rpx;

					.medal {
						width: 38rpx;
						height: 48rpx;
						display: block;
						float: left;
						margin: 18rpx 0 0 30rpx;
					}
				}

				.ranking-name {
					width: 50%;
					text-align: center;

					.medal {
						width: 50rpx;
						height: 50rpx;
						display: block;
						float: left;
						margin: 18rpx 0 0 30rpx;
						border-radius: 50%;
					}
				}

				.ranking-branch {
					width: 30%;
					text-align: center;
				}
			}

			.heightPaim {
				background: #FCF3E3;
				color: #FF8F34;
			}

			.ranking-title {
				width: 655rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #FC9751 0%, #F44B49 100%);
				border-radius: 9rpx;
				display: flex;
				margin: 0 auto -30rpx;
				transform: translateY(-30rpx);
				line-height: 60rpx;
				color: #fff;

				view {
					width: 33%;
					text-align: center;
				}
			}
		}

		.ranking-date {
			font-size: 22rpx;
			color: #E18209;
			padding-top: 30rpx;
		}

		.head-portrait {
			width: 704rpx;
			height: 120rpx;
			margin: 20rpx auto 0;
			display: flex;

			.portrait-image {
				width: 116rpx;
				height: 116rpx;
				border: 1px solid #fff;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.username-center {
				width: 400rpx;

				.ranking {
					font-size: 22rpx;
					color: #E18209;
				}

				.name-archives {
					display: flex;
					width: 100%;
					padding-top: 20rpx;

					.name {
						width: 120rpx;
						font-size: 36rpx;
						color: #E18209;
					}

					.archives {
						width: 154rpx;
						height: 40rpx;
						background: #F4DDBD;
						font-size: 24rpx;
						color: #FF8F34;
						border-radius: 16rpx;
						padding-left: 40rpx;
						position: relative;
					}

					.archives::before {
						content: '';
						width: 22rpx;
						height: 22rpx;
						position: absolute;
						top: 6rpx;
						left: 10rpx;
						background: url(http://static.bsyjk.cn/archivesIcon/70379523767A41DBBF110570B6AF189E.png)no-repeat;
						background-size: 100% 100%;
					}
				}
			}
		}
	}

	.HealthReport {
		width: 750rpx;
		min-height: 1269rpx;
		background: #2EA7E0;
		border-radius: 40rpx 40rpx 0 0;
		margin: -80rpx auto 0;
		padding-bottom: 30rpx;

		.titlename {
			padding: 30rpx 0 20rpx 30rpx;
			font-size: 36rpx;
			color: #FFFFFF;
		}
	}

	.reportItemList-body {
		.reportItemList {
			// height: 208rpx;
			text-align: center;

			.reportItemList-height {
				min-height: 80rpx;
				background: #fff;
				position: relative;

				.view-progress {
					width: 706rpx;
					margin: 0 auto;
				}

				.view-levelNamesflex {
					width: 706rpx;
					margin: 0 auto;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
				}

				.view-desc {
					width: 706rpx;
					margin: 0 auto;
					text-align: left;
					padding: 30rpx 0;
				}
			}

			.prbefoer0::before,
			.prbefoer1::before,
			.prbefoer2::before {
				content: '';
				position: absolute;
				left: 15%;
				top: -20rpx;
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 20rpx solid #fff;
			}

			.prbefoer1::before {
				left: 49.3%;
			}

			.prbefoer2::before {
				left: 82.3%;
			}

			.reportItemList-flex {
				display: flex;
				justify-content: left;
				border-bottom: 1px solid #fff;

				.reportItemList-item {
					width: 33.3%;
					height: 208rpx;
					color: #fff;
					padding-top: 30rpx;
					border-right: 1px solid #fff;
					font-size: 30rpx;

					.view-unit {
						font-size: 36rpx;

						text {
							font-size: 22rpx;
						}
					}

					.view-level {
						padding: 2rpx 20rpx;
						font-size: 22rpx;
						color: #81C042;
						background: #fff;
						display: inline-block;
						border-radius: 50rpx;
					}
				}
			}
		}
	}
	.noData {
		font-size: 30upx;
		font-weight: 500;
		color: #9B9B9B;
		line-height: 42upx;
		text-align: center;

		.noDataicon {
			width: 213upx;
			height: 209upx;
			background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
			background-size: 213upx 209upx;
			margin: 50upx auto;
		}
	}
</style>
